<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../static/css/monitor.css">
    <script src="../../js/base.js" data-path="../../"></script>
    <link rel="shortcut icon" href="../../static/img/common/logo.png">
    <title></title>
    <style>
        /* 默认隐藏盒子 */
        #main {
            display: none;
        }
    </style>
</head>

<body>
    <div id="main" class="bg_bg3">
        <div class="header bg_header1">
            <div class="left_menu"></div>
            <h1 id="header" class="title_linear1 monitor_header"></h1>
            <div class="right_menu">
                <div class="times" id="times"></div>
                <div class="user">
                    <div id="avatar" onclick="logout()"></div>
                </div>
            </div>
        </div>
        <div class="monitor row">
            <div class="monitor_left w3">
                <div class="monitor_div1 bg_bor3" id="aWaterQuality">
                    <div class="bor_title">
                        <i class="icon ice-div-color"></i>
                        水质合格率
                    </div>
                    <div class="water_polo" idName="div">
                        <div class="left">
                            <water-polo id="monitorRate" />
                        </div>
                        <div class="right">
                            <div class="text">
                                <div class="monitor_quality">
                                    合格:0
                                </div>
                                <div class="monitor_unQuality">
                                    不合格:0
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="monitor_div1 bg_bor3" id="aDeviceConsum">
                    <div class="bor_title">
                        <i class="icon ice-line-chart"></i>
                        设备用水量
                    </div>
                    <div id="waterConsum" class="echart_line water_consum"></div>
                </div>
                <div class="monitor_div1 bg_bor3" id="aDeviceConsumTable">
                    <div class="bor_title">
                        <i class="icon ice-table"></i>
                        设备用水情况
                    </div>
                    <div class="monitor_table">
                        <table border="1" id="waterConsumTable">
                        </table>
                    </div>
                </div>
            </div>
            <div class="monitor_center w6 ">
                <div class="monitor_map " id="aMap"></div>
                <div class="monitor_video  bg_bor2" id="aDeviceVideo">
                    <div class="bor_title video_title">
                        <i class="icon ice-video"></i>
                        视频监控
                    </div>
                    <div class="videoList">
                        <ul class="videoUl">
                        </ul>
                    </div>
                    <div class="arrow arrow_left" onclick="clickArrow(-150)">
                        <i class="icon ice-arrow-round-l"></i>
                    </div>
                    <div class="arrow arrow_right" onclick="clickArrow(150)">
                        <i class="icon ice-arrow-round-r"></i>
                    </div>
                </div>
            </div>
            <div class="monitor_right w3">
                <div class="monitor_div1 bg_bor3" id="aDeviceWarningPie">
                    <div class="bor_title">
                        <i class="icon ice-pie-chart"></i>
                        预警统计
                    </div>
                    <div id="deviceWarningCount" class="echart_line device_warning_count"></div>
                </div>
                <div class="monitor_div1 bg_bor3" id="aDeviceWarningLie">
                    <div class="bor_title">
                        <i class="icon ice-line-chart"></i>
                        设备预警
                    </div>
                    <div id="deviceWarning" class="echart_line device_warning"></div>
                </div>
                <div class="monitor_div1 bg_bor3" id="aDeviceNetworkStatus">
                    <div class="bor_title">
                        <i class="icon ice-table"></i>
                        设备状态
                    </div>
                    <div class="monitor_table">
                        <table border="1" id="deviceStatusTable">
                        </table>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!--抽屉-->
    <div class="bodyDraw" onclick="closePopup()">
        <div id="drawer">
        </div>
    </div>

    <div id="drawerIcon" onclick="openPopup()">
        <i class="icon ice-dropdown"></i>
    </div>
    <div-loading id="pageLoading"></div-loading>
</body>
<script>
    var drawList = [
        { title: "水质合格率", id: "aWaterQuality", icon: "ice-div-color" },
        { title: "设备用水量", id: "aDeviceConsum", icon: "ice-line-chart" },
        { title: "设备用水情况", id: "aDeviceConsumTable", icon: "ice-table" },
        { title: "监控地图", id: "aMap", icon: "ice-map" },
        { title: "视频监控", id: "aDeviceVideo", icon: "ice-video" },
        { title: "预警统计", id: "aDeviceWarningPie", icon: "ice-pie-chart" },
        { title: "设备预警", id: "aDeviceWarningLie", icon: "ice-pie-chart" },
        { title: "设备状态", id: "aDeviceNetworkStatus", icon: " ice-table" }
    ]; // 抽屉模块名称
    var videoStep = -150;
    var activeUser = null; // 当前登录用户
    var deviceList = []; // 当前设备列表
    var deviceVodeoList = []; //当前监控列表
    var monitorDatas = {}; // 当前模块所有数据
    var monitorInterval = {}; // echart定时更新任务
    var monitorAMap = null; // aMap对象
    var aMapInfoWindow;
    var echartIdList = ["waterConsum", "deviceWarningCount", "deviceWarning"]; // echartt ID
    // echart-line 线性图配置
    var echartlineOptions = {
        tooltip: {
            trigger: "axis",
            position: this.countPosition,
            formatter: e => {
                return `${e[0].seriesName}:${e[0].value}L<br/>用水时间:${e[0].axisValue}`
            }
        },
        dataZoom: [
            {
                type: 'inside', // 内置缩放功能，鼠标滚轮控制
                xAxisIndex: 0, // x 轴索引，默认为 0
                start: 0, // 默认开始位置
                end: 100, // 默认结束位置
            }
        ],
        animationDuration: 1500,
        textStyle: {
            fontSize: 15,
            color: "#00b5fe"
        },
        color: ["rgb(0, 130, 252)"],
        grid: { left: "1%", right: "3%", bottom: "0", containLabel: true },
        xAxis: [
            {
                type: "category",
                boundaryGap: false,
                data: [0, 0, 0, 0, 0]
            }
        ],
        axisTick: {
            alignWithLabel: true
        },
        yAxis: [
            {
                type: "value",
                splitLine: {
                    lineStyle: {
                        type: "dashed",
                        color: "rgba(255, 255, 255 ,.2)"
                    }
                }
            }
        ],
        series: [
            {
                name: "用水量",
                type: "line",
                data: [0, 0, 0, 0, 0],
                lineStyle: { color: "rgb(0, 177, 237)" },
                smooth: true,
                areaStyle: {
                    color: {
                        type: "linear",
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops:
                            [
                                {
                                    // 折线图颜色渐变
                                    offset: 0,
                                    color: "rgba(0, 177, 237,.9)"
                                },
                                {
                                    offset: 1,
                                    color: "rgba(0, 177, 237,.1)"
                                }
                            ]
                    }
                }
            }
        ]
    }
    // echart-pie 饼图
    var echartpieOptions = {
        tooltip: {
            trigger: "item",
            formatter: e => {
                return `${e.seriesName}<br/>${device_status[e.data.status]}:${e.data.count}台`;
            }
        },
        graphic: {
            type: 'text',
            left: 'center',
            top: 'center',
        },
        animationDuration: 1500,
        series: [
            {
                name: '用户统计',//tooltip提示框中显示内容
                type: 'pie',//图形类型，如饼状图，柱状图等
                roseType: false,// 是否显示成南丁格尔图，默认false
                data: [
                    { value: 0, name: "50%" },
                    { value: 0, name: "50%" }
                ],
                color: ["#009ef3", "#00e9d0", "#00b5fe", "#00b5fe", "#73F9F8", "#163A74"],//各个区域颜色
            }
        ]
    };

    // 页面加载
    async function onReady() {
        console.log("onReady");
        await this.initPagesData();
        // 加载数据
        await this.loadData();
        requestInterface("deviceRecords").then(res => {
            this.deviceList = res;
            const modulelist = ["waterQuality"].concat(this.echartIdList);
            modulelist.forEach(item => {
                this.initMonitorData(this.deviceList, item);
            })
            this.initMonitorTable();
            this.initMonitorVideoList();
            this.initMonitorAMap("aMap");
        })
        this.actionEchartInterval(); //定时更新echarts
        this.warningPop();
    }
    function warningPop() {
        ice.popup({
            title: "警告",
            content: `<div>*********注意*********</div>
            <div>1.本项目为个人开发项目,仅供学习用途,一经发现商用,其相关法律责任均和开发者无关！</div>
            <div>2.当前代码为1.0分支,后续开放2.0分支进行重构～</div>
            <div>3.作者:
                <a href="https://gitee.com/T-super21" target="_blank">T-super21</a>
            </div>
            <div>4.
                <a  href="https://gitee.com/T-super21/monitoringSystem" target="_blank">源码地址</>
            </div>
            `
        })
    }
    // 同步当前系统时间
    function updateTimes() {
        this.monitorInterval["systemTimes"] = () => {
            setInterval(() => {
                getEleVal("times").innerHTML = getCurrentDateTime();
            }, 1000);
        }
        this.monitorInterval["systemTimes"]();
    }
    // 初始化页面状态和数据
    async function initPagesData() {
        // 页面加载
        getEleVal("times").innerHTML = getCurrentDateTime(); // init sys times
        this.updateTimes();
        // 模拟异步加载完成，实际以接口返回时间为准(模拟时间为配置文件中的加载时间最大随机值)
        setTimeout(async () => {
            getEleVal("pageLoading").style.display = "none";
            checkLoginStatus(); // 检查登录状态
            getEleVal("header").innerHTML = globalDatas.header; // 更新标题
            //  获取当前登录用户
            this.activeUser = getStorage("activeUser");
            getEleVal("avatar").innerHTML = this.activeUser.name;
            // 初始化水球
            getEleVal("monitorRate").setAttribute("height", 160);
            getEleVal("monitorRate").setAttribute("width", 160);

        }, getRandomNumber(CONFIGS.maxLoadingTimes) * 1000);
    }
    // 退出登录
    function logout() {
        ice.alert({
            content: "是否退出当前登录？",
            yes: () => {
                const accountLists = getStorage("accountLists");
                clearAllStorage();
                setStorage("accountLists", accountLists);
                setStorage("loginStatus", false);
                ice.pop({
                    icon: "success",
                    content: "退出登录成功～",
                    url: "../../index.html"
                })
            },
        })
    }
    // 加载数据
    function loadData() {
        const fileData = [
            {
                src: `https://webapi.amap.com/maps?v=2.0&key=${CONFIGS.aMap["key"]}&callback=onReadyAMap`,
                name: "aMap Loader",
                type: "script",
                introType: "network",
            },
            {
                src: `lib/echarts/${CONFIGS.env.active}_echarts.js`,
                name: `${CONFIGS.env.active}_echarts.js`,
                type: "script"
            },
            {
                src: "module/dict.js",
                name: "字典数据文件",
                type: "script"
            }, {
                src: "module/device.js",
                name: "设备数据文件",
                type: "script"
            }, {
                src: "module/video.js",
                name: "设备摄像头数据文件",
                type: "script"
            },
            {
                src: "module/requestData.js",
                name: "模拟请求数据接口",
                type: "script"
            }
        ];
        // 动态引入echarts文件
        return new Promise(async (resolve, reject) => {
            for (let i = 0; i < fileData.length; i++) {
                await createScriptElement(fileData[i]);
                if (i == fileData.length - 1) {
                    console.log("%c设备数据加载完毕~", "color:#659F59");
                    resolve();
                }
            }
        })
    }
    // 重新设置步长值
    function initStep() {
        this.videoStep = -150;
    }
    function clickArrow(val) {
        let ele = document.getElementsByClassName("videoUl")[0];
        slideAnimate(ele, this.videoStep += val, this.initStep);
    }
    // 初始化视频
    function initMonitorVideoList() {
        let videoDiv = document.getElementsByClassName("monitor_video")[0];
        requestInterface("videoRecords").then(res => {
            console.log("res", res);
            this.deviceVodeoList = res;
            let videoBody = "";
            this.deviceVodeoList.forEach((item, index) => {
                videoBody += `<li class="video bg_bor5" onclick="openVideo(${index})">
                    <i class="icon ice-triangle"></i>
                    <img src="${item.image ? item.image : '../../static/img/common/404.png'}" alt="${item.deviceName}"/>
                    <p>${item.deviceName}</p>
                    </li>`;
            })
            let ele = document.getElementsByClassName("videoUl")[0];
            ele.innerHTML = videoBody;
            // 视频动画
            function startMove() {
                this.slideAnimate["videoInterval"] = setInterval(() => {
                    slideAnimate(ele, this.videoStep += -150, this.initStep);
                }, 5 * 1000);
            }
            startMove();
            // 鼠标移入
            videoDiv.addEventListener("mousemove", () => {
                clearInterval(this.slideAnimate["videoInterval"]);
            })
            // 鼠标移出
            videoDiv.addEventListener("mouseout", () => {
                startMove();
            })
        })
    }
    // 打开视频监控
    function openVideo(index) {
        let videoItem = this.deviceVodeoList[index];
        if (videoItem.deviceNetworkStatus) {
            ice.popup({
                title: videoItem.deviceName,
                height: "330px",
                content: `<video controls muted loop width="100%" autoplay>
                    <source src="${videoItem.url}" type="video/webm" />
                    </video>`,
                btn: ["关闭"]
            })
        } else {
            ice.pop({
                icon: "faile",
                content: `当前设备状态${device_network_status[videoItem.deviceNetworkStatus]},打开失败！`
            })
        }

    }

    // aMap 加载成功回调
    function onReadyAMap() {
        console.log("aMap地图加载成功~");
    }
    // 初始化aMap
    function initMonitorAMap(id) {
        this.monitorAMap = new AMap.Map(id, {
            resizeEnable: true,
            pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
            viewMode: "3D", //地图模式
            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
            zoom: 5, //初始化地图层级
            rotation: -15, //初始地图顺时针旋转的角度
            zooms: [2, 20], //地图显示的缩放级别范围
            center: this.deviceList[0].deviceCoordinate, //初始地图中心经纬度
        });
        this.monitorAMap.setMapStyle("amap://styles/darkblue"); // 设置主题
        this.addMapPoint();
    }
    /**
     * 更新模块数据
     * list 数据列表
     * field 更新字段
     */
    function initMonitorData(list, field) {
        if (!list || !field) {
            return;
        }
        let quality = unQuality = qualityRate = 0;
        let waterConsumList = [];
        let waterConsumTimesList = [];
        let deviceStatusList = [];
        let devideReportTimesList = [];
        let serierObj = {};
        switch (field) {
            // 水质模块
            case "waterQuality":
                // 统计合格率
                list.forEach(item => {
                    item.waterQuality ? quality++ : unQuality++;
                })
                qualityRate = Math.floor((quality / list.length) * 100);
                this.monitorDatas[field] = {
                    quality,
                    unQuality,
                    qualityRate
                }
                getEleVal("monitorRate").setAttribute("value", qualityRate);
                getEleVal("monitor_quality", "class")[0].innerHTML = `合格:${quality}台`;
                getEleVal("monitor_unQuality", "class")[0].innerHTML = `不合格:${unQuality}台`;
                break;
            // 设备用水模块
            case "waterConsum":
                list.forEach(item => {
                    waterConsumList.push(Math.floor(item.waterConsum)); // 数据默认为单位l
                    waterConsumTimesList.push(item.waterConsumEndTimes);
                })
                serierObj = {
                    name: "用水量",
                    type: "line",
                    data: waterConsumList,
                    lineStyle: { color: "rgb(0, 177, 237)" },
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops:
                                [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "rgba(0, 177, 237,.9)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 177, 237,.1)"
                                    }
                                ]
                        }
                    }
                }

                this.monitorDatas[field] = {
                    type: "line",
                    [`${field}Echart`]: echarts.init(getEleVal(field)),
                    options: {
                        tooltip: {
                            trigger: "axis",
                            position: this.countPosition,
                            formatter: e => {
                                return `${e[0].seriesName}:${e[0].value}L<br/>用水时间:${e[0].axisValue}`
                            }
                        },
                        xAxis: [{ data: waterConsumTimesList }],
                        series: [serierObj]
                    }
                }
                this.updataEchart(field);
                break;
            // 设备预警
            case "deviceWarning":
                list.forEach(item => {
                    deviceStatusList.push(item.deviceStatus);
                    devideReportTimesList.push(item.deviceReportTimes);
                })
                serierObj = {
                    name: "预警数",
                    type: "line",
                    data: deviceStatusList,
                    lineStyle: { color: "rgb(0, 177, 237)" },
                    smooth: true,
                    areaStyle: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops:
                                [
                                    {
                                        // 折线图颜色渐变
                                        offset: 0,
                                        color: "rgba(0, 177, 237,.9)"
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(0, 177, 237,.1)"
                                    }
                                ]
                        }
                    }
                }
                this.monitorDatas[field] = {
                    type: "line",
                    [`${field}Echart`]: echarts.init(getEleVal(field)),
                    options: {
                        tooltip: {
                            trigger: "axis",
                            formatter: e => {
                                return `${e[0].seriesName}:${e[0].value}台<br/>预警类型:${device_status[e[0].value]}<br/>上报时间:${e[0].axisValue}`
                            }
                        },
                        xAxis: [{ data: devideReportTimesList }],
                        series: [serierObj]
                    }
                }
                this.updataEchart(field);
                break;
            // 设备预警统计
            case "deviceWarningCount":
                // 统计预警
                let warningList = [];
                for (let key in device_status) {
                    let count = list.filter(item => { return item.deviceStatus == key }).length;
                    let value = (count / list.length) * 100;
                    warningList.push({
                        value,
                        count,
                        name: `${value}%`,
                        status: key,
                    })
                }
                this.monitorDatas[field] = {
                    type: "pie",
                    [`${field}Echart`]: echarts.init(getEleVal(field)),
                    options: {
                        tooltip: {
                            trigger: "item",
                            formatter: e => {
                                return `${e.seriesName}<br/>${device_status[e.data.status]}:${e.data.count}台`;
                            }
                        },
                        series: [{
                            name: "设备预警",
                            type: "pie",
                            roseType: false, data: warningList,
                            label: {
                                position: "inner"
                            },
                            color: ["#009ef3", "#00e9d0", "#00b5fe", "#00b5fe", "#73F9F8", "#163A74"],//各个区域颜色
                        }]
                    }
                }
                this.updataEchart(field);
                break;
            default: {
                console.log(`%c暂时不支持${field}模块数据加载,请配置～`, "color:red");
            }
        }
    }
    // 添加点
    function addMapPoint() {
        this.monitorAMap.on('complete', () => {
            // 创建 AMap.LabelsLayer 图层
            var layer = new AMap.LabelsLayer({
                zooms: [3, 20],
                zIndex: 1000,
                collision: false
            });

            // 将图层添加到地图
            this.monitorAMap.add(layer);
            var markers = [];
            var icon = {
                type: "image",
                image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                size: [10, 13],
                anchor: "bottom-center",
            };

            for (var i = 0; i < this.deviceList.length; i++) {
                var curPosition = this.deviceList[i].deviceCoordinate;
                var curData = {
                    extData: {
                        device: this.deviceList[i]
                    },
                    position: curPosition,
                    icon
                };

                var labelMarker = new AMap.LabelMarker(curData);
                markers.push(labelMarker);
                // 给marker绑定事件
                labelMarker.on('click', e => {
                    this.openInfo(e);
                });
            }

            // 一次性将海量点添加到图层
            layer.add(markers);
            // 普通点
            var normalMarker = new AMap.Marker({
                type: "image",
                image: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                anchor: "bottom-center",
                offset: [0, -15],
            });
        });
    }
    //在指定位置打开信息窗体
    function openInfo(item) {
        let device = item.target._opts.extData.device;
        this.aMapInfoWindow ? this.aMapInfoWindow.close() : "";
        //构建信息窗体中显示的内容
        var info = [];
        info.push(`<div class="amap_info" style=\"padding:7px 0px 0px 0px;\"><h4 class="title_linear1" >${device.deviceAddress}</h4>`);
        info.push(`<p >设备名称: ${device.deviceName}</p>`);
        info.push(`<p >设备状态: ${device_network_status[device.deviceNetworkStatus]}</p></div></div>`);
        info.push(`<p >用水量: ${device.waterConsum}</p></div></div>`);
        info.push(`<p >供水量: ${device.waterSupply}</p></div></div>`);
        info.push(`<p >上报时间: ${device.deviceReportTimes}</p></div></div>`);

        this.aMapInfoWindow = new AMap.InfoWindow({
            content: info.join("")  //使用默认信息窗体框样式，显示信息内容
        });

        aMapInfoWindow.open(this.monitorAMap, this.monitorAMap.getCenter());
    }
    /**
     * 更新是table数据
     * theadList table thead
     * tbodyList table tbody
     * id table 容器id
     */
    function updataMonitorTable(theadList, tbodyList, id = "") {
        if (!id) {
            return;
        }
        theadList.unshift({ type: "index", title: "序号" });
        let tabDoc = document.getElementById(id);
        let thead = "";
        let tbody = "";
        // 处理thead
        for (let i = 0; i < 1; i++) {
            thead += `<thead>`;
            for (let j = 0; j < 1; j++) {
                thead += `<tr>`;
                theadList.forEach(item => {
                    thead += `<th>${item.title}</th>`;
                })
                thead += `</tr>`
            }
            thead += `</thead>`
        }
        tbody += thead;
        // 处理tbody
        for (let i = 0; i < 1; i++) {
            tbody += `<tbody>`;
            tbodyList.forEach((item, index) => {
                tbody += `<tr>`;
                for (let j = 0; j < theadList.length; j++) {
                    j == 0 ? tbody += `<td>${index + 1}</td>` : tbody += `<td>${theadList[j].dict ? theadList[j].dict[item[theadList[j].type]] : item[theadList[j].type]}</td>`;
                }
                tbody += `</tr>`
            })
            tbody += `</tbody>`;
        }
        tabDoc.innerHTML = tbody;
    }

    // 初始化table数据
    function initMonitorTable() {
        requestInterface("deviceRecords", { currPage: 1, pageSize: 10 }).then(res => {
            // 设备用水情况
            this.updataMonitorTable(
                [
                    { title: "名称", type: "deviceName" },
                    { title: "设备类型", type: "deviceType", dict: device_type },
                    { title: "用水量", type: "waterConsum", },
                    { title: "用水时间", type: "waterConsumStartTimes" }
                ],
                res,
                "waterConsumTable");
            // 设备网络情况
            this.updataMonitorTable(
                [
                    { title: "名称", type: "deviceName" },
                    { title: "设备类型", type: "deviceType", dict: device_type },
                    { title: "状态", type: "deviceNetworkStatus", dict: device_network_status },
                    { title: "上报时间", type: "deviceReportTimes" }
                ],
                res,
                "deviceStatusTable");
        })

    }
    /**
     * 计算tooltop位置
     */
    function countPosition(point, params, dom, rect, size) {
        // 计算 tooltip 的位置
        var x = point[0]; // 鼠标位置的 x 坐标
        var y = point[1]; // 鼠标位置的 y 坐标
        var width = size.contentSize[0]; // tooltip 的宽度
        var height = size.contentSize[1]; // tooltip 的高度
        var offsetX = 10; // 向左偏移量，单位为像素
        var offsetY = 10; // 向上偏移量，单位为像素

        // 判断 tooltip 是否超出浏览器窗口
        var newX = x + offsetX;
        var newY = y + offsetY;
        if (newX + width > window.innerWidth) {
            newX = x - offsetX - width;
        }
        if (newY + height > window.innerHeight) {
            newY = y - offsetY - height;
        }

        // 返回计算后的位置信息
        return [newX, newY];
    }
    /**
     * 更新echart数据
     * field echarts id
     */
    function updataEchart(field) {
        let echartData = this.monitorDatas[field];
        let options = JSON.parse(JSON.stringify(this[`echart${echartData.type}Options`]));
        Object.assign(options, echartData.options);
        echartData[`${field}Echart`].clear(); // 清除线性图
        echartData[`${field}Echart`].resize();
        echartData[`${field}Echart`].setOption(options);
    }
    // 重新绘制画布
    function resizeEchart() {
        this.echartIdList.forEach(id => {
            this.monitorDatas[id][`${id}Echart`].resize();
        })
    }
    // 打开弹框
    function openPopup() {
        let bodyDrawDiv = getEleVal("bodyDraw", "class")[0];
        let drawerIcon = getEleVal("drawerIcon");
        let drawerDiv = getEleVal("drawer");
        let htmlStr = "";
        this.drawList.forEach(item => {
            htmlStr += `<div class="drawerItem" onclick="event.stopPropagation()">
                <i class="icon ${item.icon}"></i>
                <a href="#${item.id}" class="transition-link">${item.title}</a>
                </div>`;
        })
        htmlStr += `<div class="drawerItem" onclick="event.stopPropagation();logout()">
            <i class="icon ice-exit"></i>
            <a class="transition-link">退出登录</a>
            </div>`;
        htmlStr += `<div class="putAway drawerItem" onclick="closePopup()"><<<收起</div>`;
        drawerDiv.innerHTML = htmlStr;
        drawerIcon.style.display = "none"; // 隐藏icon
        bodyDrawDiv.style.left = 0;
        drawerDiv.style.left = 0;

    }
    // 收起弹框
    function closePopup() {
        let bodyDrawDiv = getEleVal("bodyDraw", "class")[0];
        let drawerIcon = getEleVal("drawerIcon");
        let drawerDiv = getEleVal("drawer");
        drawerDiv.style.left = -200 + "px";
        setTimeout(() => {
            bodyDrawDiv.style.left = -100 + "%";
            drawerIcon.style.display = "block";// 显示drawericon
        }, 1000);
    }
    // 定时更新echart视图
    function actionEchartInterval() {
        this.echartIdList.forEach(name => {
            this.monitorInterval[name] = setInterval(() => {
                this.updataEchart(name);
            }, globalDatas.status.echartUpdateTimes[CONFIGS.env.active] * 1000);
        })
    }
    // 页面摧毁
    window.addEventListener("beforeunload", () => {
        console.log("beforeunload");
        // 清空定时器
        for (let key in this.monitorInterval) {
            clearInterval(this.monitorInterval(key));
        }
    })
    // 页面大小监听
    window.addEventListener("resize", event => {
        const pageWidth = document.documentElement.clientWidth;
        this.resizeEchart();// 重绘Echart画布
        if (pageWidth <= 575) {
            getEleVal("monitorRate").setAttribute("height", 120);
            getEleVal("monitorRate").setAttribute("width", 120);
        } else if (pageWidth > 576 && pageWidth <= 768) {
            getEleVal("monitorRate").setAttribute("height", 120);
            getEleVal("monitorRate").setAttribute("width", 120);

        } else if (pageWidth > 769 && pageWidth <= 992) {
            getEleVal("monitorRate").setAttribute("height", 150);
            getEleVal("monitorRate").setAttribute("width", 150);
        } else if (pageWidth > 992 && pageWidth <= 1200) {
            getEleVal("monitorRate").setAttribute("height", 160);
            getEleVal("monitorRate").setAttribute("width", 160);
        } else {
            // 超大屏幕
            getEleVal("monitorRate").setAttribute("height", 160);
            getEleVal("monitorRate").setAttribute("width", 160);
        }
    })
</script>

</html>